<template>
    <div class="one-prepare">
        <template ref="headerRef">
            <HeaderRefComponent @searchHandle="searchList" @editCard="editCard" :schools="schools"
                                :storeId="params.schoolId"/>
        </template>
        <Search @search="searchList" :cardTypes="cardTypes" :totalNum="totalNum" :surplus="surplus"/>
        <cus-table :auto-request="false" ref="tableRef" url="/admin/memberCard/queryPage">
            <el-table-column prop="userCode" label="用户编码"/>
            <el-table-column prop="userName" label="姓名" width="100"/>
            <el-table-column prop="mobile" label="账号"/>
            <el-table-column prop="storeId" label="开卡门店">
                <template #default="{ row }">
                    {{schools.find((item)=> item?.id==row.storeId )?.schoolName}}
                </template>
            </el-table-column>
            <el-table-column prop="cardType" label="购卡类型">
                <template #default="{ row }">
                    {{cardTypes.find((item)=> item?.cardType==row.cardType )?.name}}
                </template>
            </el-table-column>
            <el-table-column prop="openTime" label="开卡日期" width="100">
                <template #default="{ row }">
                    {{row?.openTime }}
                </template>
            </el-table-column>
            <el-table-column prop="dueTime" label="有效期至" width="100">
                <template #default="{ row }">
                    {{row?.dueTime}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button type='text' @click="delCard(row)">删除</el-button>
                    <el-button type='text' @click="editCard(row)">编辑</el-button>
                </template>
            </el-table-column>
        </cus-table>
    </div>
</template>

<script lang='ts'>

    import {ref, Ref, onMounted} from 'vue'
    import {ElMessage} from 'element-plus'
    import $ from '$';
    import Search from './components/search-time.vue'
    import HeaderRefComponent from './components/header-ref.vue';
    import editMember from './edit-member/index.vue';

    export default {
        components: {Search, HeaderRefComponent},
        setup(props) {
            const cardTypes = ref([
                // {cardType: 1, name: '畅享卡'},
                // {cardType: 2, name: '周中卡'},
                // {cardType: 3, name: '周末卡'}
            ]);

            let params: Ref<any> = ref({
                cardType: '',
                searchName: '',
                schoolId: '',
            });

            let schools = ref([]);
            let searchLoading = ref(true);
            let loading = ref(true);

            let totalNum = ref(0);
            let surplus = ref(0);

            let tableRef: Ref<any> = ref();
            let headerRef: Ref<any> = ref();

            // 搜索时刷新接口
            const searchList = (data) => {
                searchLoading.value = true
                params.value = {...params.value, ...data}
                tableRef.value.request(params.value).then(() => searchLoading.value = false);
            };

            //获取门店会员总数/剩余数
            const getMember = async () => {
                let res: any = await $.http.post(`/admin/storeManage/querySurplusNum?code=${params.value.schoolId}`, {});
                if (res.result) {
                    totalNum.value = res.json.totalNum;
                    surplus.value = res.json.surplus;
                    // isSystem:1,   //是否加盟  0否  1是
                    // proceed: true
                }
            };


            const editCard = (row) => {
                $.modal.create({
                    title: '开卡信息',
                    width: 450,
                    zIndex: 998,
                    component: editMember,
                    props: {cardTypes: cardTypes.value, surplus, schoolId: params.value.schoolId, rowData:row},
                    headerStyle: {'margin-bottom': '20px'},
                    bodyStyle: {padding: '0 20px 28px'}
                }).then((res) => {
                    getMember()
                    tableRef.value.request(params.value).then(() => searchLoading.value = false);
                })
            };

            const delCard = async ({id}) => {
                let res: any = await $.http.post(`/admin/memberCard/deleteById/${id}`, {});
                if (res.result) {
                    ElMessage.success('删除成功!')
                } else {
                    ElMessage.error('删除失败!')
                }
                getMember();
                tableRef.value.request(params.value).then(() => searchLoading.value = false);
            };
            onMounted(async () => {
                $.emitter.emit('slot', headerRef);
                let res: any = await $.http.post('/admin/school/queryPage?size=10000&current=1', {});
                schools.value = res.records;
                params.value.schoolId = res.records[0].id
                getMember()
                tableRef.value.request(params.value).then(() => searchLoading.value = false);


                let ret: any = await $.http.post('admin/storeManage/query?type=2', {});
                if(ret.result){
                    cardTypes.value = ret.json.map((item)=>{
                        return {
                            cardType:item.id,
                            ...item,
                            validityDays:[1,2,3,4,5,6].map((n)=>item.totalNum*n)
                        }
                    });
                }else {
                    ElMessage.warning(ret.msg);
                }


            });
            return {
                params,
                loading,
                searchLoading,
                tableRef,
                headerRef,
                cardTypes,
                totalNum,
                surplus,
                schools,
                searchList,
                editCard,
                delCard,
                getMember
            }
        }
    }
</script>

